<template>
  <div>
    <ul v-for="message in messageList" :key="message.id" >
      <li >
          <!-- 通过 to 的字符串写法是实现，跳转+利用qyery接收传递参数 -->
          <!-- <router-link :to="`/home/message/detail/?id=${message.id}&title=${message.title}&author=${message.author}`">
          {{message.title}}-{{message.author}}</router-link> -->
          <!-- 通过to的对象写法实现：跳转+利用params接收传递参数 -->
          <router-link  
          :to="{
              name:'xiangqing',
              path:'/home/message/detail',
              query:{
                  id:message.id,
                  title:message.title,
                  author:message.author
              }
              }"
              >
              {{message.title}}-{{message.author}}
            </router-link>
      </li>
     
</ul>
    <hr>
    <!-- 展示区 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Message',
  data(){
      return {
              messageList:[
              {id:'001',title:'消息—岸田文雄向靖国神社供奉祭品(热)',author:'百度热搜'},
              {id:'002',title:'消息—翟志刚谈上次出舱感受',author:'新华社'},
              {id:'004',title:'消息—市委书记市长到田间抢收玉米',author:'日报'},
              {id:'005',title:'消息—美中情局招懂中文间谍 中国该咋办(热)',author:'生活报'},
              {id:'006',title:'消息—全国首例利用商户收款码套现案告破',author:'法制栏目'}
          ]
      }
  }
  
}
</script>
